// 获取分类的方法
// 定义一个获取分类的方法
function getArticleCate() {
  $.ajax({
    url: "/my/article/cates", // ajax默认就是类型
    success({ status, message, data }) {
      // status === 0的意味着获取数据成功 否则失败
      if (status === 0) {
        // 如果成功了 要将数据渲染到select的下拉选项
        // data => 动态渲染多个option => arttemplate
        const html = template("option-temp", { data }) // template("模板的ID", 对象) each 对象.属性
        // html要渲染到页面上
        $("select[name=cate_id]").html(html) // 渲染html
        // 将select的内容插入了html => html为什么没有显示？
        // layui-form => 一旦更新了form表单的html => 调用一下form表单的一个方法  render
        layui.form.render("select", "formData") // 渲染方法
      } else {
        layui.layer.msg(message)
      }
    },
  })
}

function initCropper() {
  // 先获取image
  $("#image").cropper({
    // 对象是 裁剪区域的配置信息
    aspectRatio: 400 / 280, // 纵横比 不是头像 不是方的 封面一般是 长方形的
    preview: ".img-preview", // 表示要渲染的区域
  })
}
let state = "已发布" // 默认状态是已发布- 点击存草稿的时候 =>草稿
function registerEvent() {
  $("#selectFile").click(function () {
    // 点击选择封面时触发
    $("#myFile").trigger("click")
    // $("#myFile").click()
    // document.querySelector("#myFile").click()
  })

  // 监听input的值改变事件
  $("#myFile").change(function (event) {
    // event.target 事件源
    // console.log(event.target.files)
    // files是一个数组
    const [file] = event.target.files // 结构赋值
    if (!file) return

    // 走到这 File对象 => 页面的image的图片上 =>  转化成一个文件地址
    const imageUrl = window.URL.createObjectURL(file)
    // 将地址赋值到 裁剪区的img的src上
    $("#image").cropper("destroy") // 销毁原来的裁剪区 // 单词 destroy
    $("#image").attr("src", imageUrl) // 重新赋值一个新地址
    // 还需要重新初始化
    initCropper()
  })

  // 注册点击草稿的事件
  $("#btnDraft").click(function () {
    // 点击了草稿按钮
    state = "草稿"
  })
  // 事件冒泡机制- 按钮触发事件 => 父级的提交事件
  $("#myForm").on("submit", function (event) {
    // 阻止它默认的提交事件
    event.preventDefault()

    const data = new FormData($(this)[0]) // new FormData(form表单的dom对象)
    // 此时formData缺少 state 和 cover_image
    data.append("state", state) // 添加状态
    // image => canvas => blob
    $("#image")
      .cropper("getCroppedCanvas", {
        // 参数就是生成多大的图片
        width: 400,
        height: 280,
      })
      .toBlob(function (blob) {
        // 这里的blob 就是canvas转化成功之后的代码
        // 将blob添加到formData中
        data.append("cover_img", blob) // 这里我们认为 我们的数据已经全部ok啦
        $.ajax({
          url: "/my/article/add",
          method: "post",
          data, //不是一个对象 它是一个formData
          // jquery发送formData类型，需要加两个属性
          contentType: false, // 正常来讲 发的都是普通的类型 不需要设置contentType
          processData: false, // 目的的是让ajax发送正确的格式
          success({ status, message }) {
            if (status === 0) {
              // 为0意味着添加成功
              // 如果添加成功 直接回到文章列表页
              window.location.href = "/article/art_list.html"
            } else {
              // 否则添加失败
              layui.layer.msg(message)
            }
          },
        })
      })
    // data就是表单数据
    // console.log(data)
  })
}

getArticleCate()
initEditor() // 初始化编辑器
initCropper() // 初始化裁剪区域
registerEvent() // 注册点击事件
